<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            注册
            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>
        <view class="mt-[195rpx] text-center text-[46rpx] font-medium">
            <view class="tracking-widest"> 请选择注册身份</view>
        </view>
        <view class="mx-[20rpx] mt-[198rpx] flex justify-between text-[#3D3D3D] text-[38rpx] font-medium">
            <view  >
                <view @click="selectValue = 1"  :class="selectValue == 1 ? 'bg-[#FD755D] text-white' : ''"
                    class="flex flex-col items-center border border-[#ACAAAA] rounded py-2 h-[292rpx] w-[230rpx]">
                    <image class="h-[176rpx] w-[218rpx]"
                        src="https://gangantao.com/image/20241217/d8e7a48f-feff-4310-817a-1cb898133d77.png"></image>
                    <view class="mt-3">学员</view>
                </view>
                <view v-if="selectValue == 1" class="mt-[40rpx] flex justify-center"> <u-icon
                        name="checkmark-circle-fill" color="#28C445" size="42"></u-icon></view>
            </view>
            <view>
                <view @click="selectValue = 2" :class="selectValue == 2 ? 'bg-[#FD755D] text-white' : ''"
                    class="flex flex-col items-center justify-center border border-[#ACAAAA] rounded py-2 h-[292rpx] w-[230rpx]">
                    <image class="h-[152rpx] w-[152rpx]"
                        src="https://gangantao.com/image/20241217/1a0dd1bc-5604-4add-b2a3-b2eafb20a15d.png"></image>
                    <view class="mt-3">教师</view>
                </view>
                <view v-if="selectValue == 2" class="mt-[40rpx] flex justify-center"> <u-icon
                        name="checkmark-circle-fill" color="#28C445" size="42"></u-icon></view>
            </view>
            <view>
                <view @click="selectValue = 3" :class="selectValue == 3 ? 'bg-[#FD755D] text-white' : ''"
                    class="flex flex-col items-center justify-center border border-[#ACAAAA] rounded py-2 h-[292rpx] w-[230rpx]">
                    <image class="h-[156rpx] w-[160rpx]"
                        src="https://gangantao.com/image/20241217/48741afd-079f-46d3-a54c-ab6d921d78a2.png"></image>
                    <view class="mt-3">管理员</view>
                </view>
                <view v-if="selectValue == 3" class="mt-[40rpx] flex justify-center"> <u-icon
                        name="checkmark-circle-fill" color="#28C445" size="42"></u-icon></view>
            </view>

        </view>
        <view class="mt-[252rpx] flex justify-center">
            <view @click="goRegister"
                class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                确定</view>
        </view>
    </view>
    <!-- <u-popup :show="successful" @close="successful = false" mode="center" round="12" :safeAreaInsetBottom="false">
        <view v-if="false" class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
            <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

            <view class="mt-[32rpx] text-[#3D3D3D] text-[38rpx] font-bold">微信绑定成功</view>
            <view class="mt-[126rpx] flex justify-center">
                <view
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>
        <view v-else class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
            <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

            <view class="mt-[32rpx] text-[#3D3D3D] text-[38rpx] font-bold">该手机号码未注册 </view>
            <view class="mt-[6rpx] text-[#3D3D3D] text-[38rpx] font-bold">请先注册后再绑定 </view>

            <view class="mt-[126rpx] flex justify-center">
                <view
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    去注册</view>
            </view>
        </view>
    </u-popup> -->
</template>

<script setup>
import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref } from "vue"
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const vShowData =ref(0)
const successful = ref(false)
const selectValue = ref(1)

onLoad((options) => {   
     vShowData.value = options.group_id  
})

const goback = () => {
    uni.navigateBack()
}
const goRegister =() =>{ 
    if(vShowData.value == selectValue.value ){ 
         uni.showToast({
           title: '请勿重复申请',
           icon: 'closeempty',
           duration: 2000, 
         }); 
    }else{ 
      if(selectValue.value == 1){
          navigateTo('/pages/studentRegistr/studentRegistr')
      }else if(selectValue.value == 2){
          navigateTo('/pages/teacherRegister/teacherRegister')
      }else{
          navigateTo('/pages/adminRegistr/adminRegistr')
      }
    } 
}



const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}
</style>